{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/brand_info.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/basic.min.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/dropzone.min.css' %}" type="text/css" rel="stylesheet">

{% endblock %}

{% block content %}
    <div class="inner wrp">
        <div class="page_nav">
            <a href="{% url 'smErp:manage' %}" class="jsUrlLink" data-url="{% url 'smErp:manage' %}" target="_self">管理中心</a>
            <span class="gap">/</span>
            创建品牌
        </div>
        <div class="container_box cell_layout">
            <div class="processor" id="process">
                <ol>
                    <li id="set1" class="current size1of1">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">1</i>
                            <h4>填写基本信息</h4>
                        </div>
                    </li>
                    <li id="set2" class="size1of2 last">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">2</i>
                            <h4>提交成功</h4>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="step_panel text_padding">
                <div class="app_create_box app" id="step1">
                    <form class="form" id="form" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="frm_control_group" id="js_name_group">
                            <label for="" class="frm_label">品牌名称</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="name_zh" id="name_zh" class="frm_input" type="text">
                                </span>
                                <p id="name_zh_msg" class="frm_tips hider"></p>
                            </div>

                        </div>
                        <div id="name_upload" class="dynamic_box"></div>
                        <div class="frm_control_group">
                            <label for="" class="frm_label">英文名称<em class="tips">(选填)</em></label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="name_en" id="name_en" class="frm_input" type="text">
                                </span>
                                <p id="name_en_msg" class="frm_tips hider"></p>
                            </div>
                        </div>
                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">描述信息</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="description" id="description" class="frm_textarea" maxlength="800"></textarea>
                                </span>
                                <p class="frm_tips">最多800字</p>
                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">商标LOGO</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传品牌LOGO图片
                                                <br>
                                                512*512像素，大小不超过500KB。
                                            </p>
                                            <button type="button" class="layui-btn" id="logo-img" style="background-color: #44b549;">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                            <span class="upload_area webuploader-container"></span>
                                            <input name="logo" id="logo" value="" type="hidden">
                                            <p class="upload_preview size108" id="fileView-logo" style="display: block;">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">商标证书</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传品牌商标证书图片
                                                <br>
                                                842*595像素，大小不超过500KB。
                                            </p>
                                            <button type="button" class="layui-btn" id="license-img" style="background-color: #44b549;">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                            <span class="upload_area webuploader-container"></span>
                                            <input name="license_img" id="license_img" value="" type="hidden">
                                            <p class="upload_preview size108" id="fileView-license" style="display: block;">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tool_bar border with_form">
                            <a href="javascript:void(0);" class="btn btn_primary jsSendBt" id="brandBtn">提交</a>
                        </div>
                    </form>
                </div>

                <div class="app_create_box result" id="step2" style="display:none">
                    <div class="page_msg simple default">
                        <div class="inner group">
                            <span class="msg_icon_wrp">
                                <i class="icon_msg success"></i>
                            </span>
                            <div class="msg_content">
                                <h4>您的品牌信息已成功提交审核，预计在7天内完成审核</h4>
                                <p>
                                    审核通过后，你才可以进行产品信息操作
                                </p>
                                <p class="spacing">
                                    <a href="{% url 'smErp:manage' %}" data-url="{% url 'smErp:manage' %}" target="_self" class="btn btn_primary jsUrlLink">查看管理中心</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block footscript %}
    <script src="{% static 'smErp/assets/dropzone/dropzone.min.js' %}"></script>
    <script>
        var upload_imgs = {} ;
        var id = 1;
        // 消息提示框
        var name_zh_msg = $("#name_zh_msg");
        var name_en_msg = $("#name_en_msg");
        var license_img_msg = $("#license_img_msg");
        var logo_msg = $("#logo_msg");

        layui.use('upload', function(){
            var upload = layui.upload;
            //logo图片上传
            var logo_uploadInst = upload.render({
                elem: '#logo-img' //绑定元素
                ,url: "{% url 'smErp:image_upload' %}" //上传接口
                ,accept: 'images'
                ,data : {"max_size": 500, "height": 512, "width": 512}
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        var fileview_logo = $("#fileView-logo");
                        fileview_logo.empty();
                        fileview_logo.append('<img id="" src="' + res.img_url + '">');
                        $("#logo").val(res.img_url);

                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

            //证书图片上传
            var license_uploadInst = upload.render({
                elem: '#license-img' //绑定元素
                ,url: "{% url 'smErp:image_upload' %}" //上传接口
                ,accept: 'images'
                ,data : {"max_size": 500, "height": 595, "width": 842}
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        var fileview_logo = $("#fileView-license");
                        fileview_logo.empty();
                        fileview_logo.append('<img id="" src="' + res.img_url + '">');
                        $("#license_img").val(res.img_url);

                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });
        });

        $("#name_zh").blur(function(){
            var name_zh = $("#name_zh").val();
            // 判断是否含有特殊字符
            if(name_zh) {
                if (!check_zh_en_char(name_zh)) {
                    name_zh_msg.html("品牌名称只能是中英文");
                    name_zh_msg.css("color", "red");
                    name_zh_msg.show();
                }
            }
        }).focus(function(){
            name_zh_msg.hide();
        });

        $("#name_en").blur(function(){
            var name_en = $("#name_en").val();
            // 判断是否含有特殊字符
            if(name_en) {
                if (!check_en_char(name_en)) {
                    name_en_msg.html("品牌英文名称只能是英文，数字");
                    name_en_msg.css("color", "red");
                    name_en_msg.show();
                }
            }
        }).focus(function(){
            name_en_msg.hide();
        });

        $("#brandBtn").on("click", function(){
            var name_zh = $("#name_zh").val();
            var license_img = $("#license_img").val();
            var logo = $("#logo").val();
            if(!name_zh || !license_img || !logo){
                if(!name_zh){
                    name_zh_msg.css("color","red");
                    name_zh_msg.html("请输入品牌名称");
                    name_zh_msg.show();
                }
                if(!license_img){
                    license_img_msg.css("color","red");
                    license_img_msg.html("请上传品牌证书");
                    license_img_msg.show();
                }
                if(!logo){
                    logo_msg.css("color","red");
                    logo_msg.html("请上传品牌logo");
                    logo_msg.show();
                }
                return ;
            }else{
                 if(name_zh) {
                     if (!check_zh_en_char(name_zh)) {
                         name_zh_msg.html("品牌名称只能是中英文");
                         name_zh_msg.css("color", "red");
                         name_zh_msg.show();
                         return;
                     }
                 }
                if(name_en) {
                    if (!check_en_char(name_en)) {
                        name_en_msg.html("品牌英文名称只能是英文，数字");
                        name_en_msg.css("color", "red");
                        name_en_msg.show();
                        return;
                    }
                }

            }
            var brand_info = $("#form").serialize();
            $.post("{% url 'smErp:create_brand' %}", brand_info,
                    function(data, status, xhr) {
                        if(status == "success") {
                            if(data.result == 0) {
                                // 提交品牌信息
                                //alert(brand_info);
                                // 切换状态
                                $("#set2").addClass("current");
                                $("#set1").removeClass("current");
                                $("#set1").addClass("complete");
                                $("#set1").children("div[class='step_inner']").children("i[class='icon_step']").html("");
                                $("#set1").children(".step_line").css("background-color", "#44b549");
                                // 改变进度 栏状态
                                $("#step1").hide();
                                $("#step2").show();
                            }else{
                                layer.msg(data.reason);
                            }
                        }else{
                            layer.msg(status);
                        }

                    },
                    "json");
        });
    </script>
{% endblock %}




